import React, { Component } from 'react'
import { Route, Link ,withRouter} from "react-router-dom"
import { Carousel, Drawer, Button } from 'antd';
import { WechatFilled } from '@ant-design/icons';
import img1 from "./register/img/1.png"
import img2 from "./register/img/2.png"
import img3 from "./register/img/3.png"
import img4 from "./register/img/4.png"



class Register extends Component {
    
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            placement: 'bottom',
            imgList: [img1, img2, img3, img4 ],
        }
    }
    showDrawer = () => {
        this.setState({
            visible: true,
        });
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    };

    onChange = e => {
        this.setState({
            placement: e.target.value,
        });
    };

    render() {
        const { placement, visible, imgList } = this.state;
        return (
            <div style={{ background: '#fddf03', padding: '25px',overflow:'hidden',height:'100vh'
            }}>
                <Carousel effect="fade" autoplay={true} style={{ height: '75vh' }} dots={true}>
                    {
                        imgList?.map((img) => {
                            return (
                                <div>
                                    <h3 style={{ width: '100%', color: '#000', textAlign: 'center', flex: 1 }}><img src={img} style={{ width: '100%', height: '100%' }} /></h3>
                                </div>
                            )
                        })
                    }
                </Carousel>
                <div style={{
                    marginBottom: '5%', background: '#fff',
                    width: '100%', textAlign: 'center', padding: '10px',
                    fontSize: '18px', color: '#000',
                    borderRadius: '10px'
                }}>
                    <WechatFilled style={{ color: '#48c000', marginRight: '10px' }} />
                    <Link to="/info" style={{ color: '#000' }}><span>邮箱注册</span></Link>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' ,width:'100%'}}>
                    <Button onClick={this.showDrawer} style={{ width: '45%', padding: '25px 0', lineHeight: '0px', borderRadius: '10px', background: '#fff184', fontSize: '16px', color: '#000', border: '0', outline: 'none' }}>
                        其他方式注册
                    </Button>
                    <button style={{ width: '45%', borderRadius: '10px', background: '#fff184', fontSize: '16px', border: '0', outline: 'none' }}>
                        <Link to="/EmailLogin" style={{ color: '#000' }}>已有账号登录</Link>
                    </button>
                </div>
                <Drawer
                    placement={placement}
                    closable={false}
                    onClose={this.onClose}
                    visible={visible}
                    key={placement}
                    style={{ textAlign: 'center', padding: '0px'}}
                >
                    <p style={{ lineHeight: '52px', margin: '0px', fontSize: '16px' }}>
                        <Link to="/info" style={{ color: '#000' }}>邮箱注册</Link>
                    </p>
                    <p style={{ lineHeight: '52px', margin: '0px', fontSize: '16px',  }}>
                        <Link to="/info" style={{ color: '#000' }}>用户名注册</Link>
                    </p>
                    <p
                        style={{ lineHeight: '52px', margin: '0px', fontSize: '16px', color: '#000', fontWeight: 'bold', background: '#e1e1e1' }}
                        onClick={this.onClose}
                    >
                        取消
                    </p>
                </Drawer>
            </div>
        )
    }
}
export default Register
